<template>
    <view class="home">
        <!-- 导航栏 -->
        <uni-nav-bar fontSize="60" backgroundColor="none" :shadow="false" leftWidth="250rpx" rightWidth="0" :border="false">
            <block slot="left">
                <image class="homehl-img" src="@/static/images/homehl.png" mode="widthFix"></image>
            </block>
            <view class="uni-title">选车用车</view>
        </uni-nav-bar>
        <view class="content">
            <!-- 轮播图 -->
            <uni-swiper-dot class="uni-swiper-dot-box" :dotsStyles="dotsStyles" :info="data" :current="current"
                field="content">
                <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
                    <swiper-item v-for="(item, index) in data" :key="index">
                        <view class="swiper-item" @click="clickBannerItem(item)">
                            <image :src="item.image" mode="aspectFill" :draggable="false" />
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
            <!-- 甄品惠购 -->
            <view class="list-tabs mt30">
                <y-tabs v-model="activeIndex" swipeable sticky :offsetTop="offsetTop" @slide-change="slideChange"
                    @slide-end="slideEnd">
                    <y-tab class="y-tab-virtual" v-for="(title, index) in tabs" :title="title" :key="index">
                        <!-- 内容页滑动时锁住scroll-view的竖向滚动 -->
                        <scroll-view class="scroll-wrap" :scroll-y="locked && activeIndex === index ? false : true">
                            <findcar-list :activeIndex="index" />
                            <!-- 内容啊内容啊内容啊 -->
                        </scroll-view>
                    </y-tab>
                </y-tabs>
            </view>
        </view>
    </view>
</template>

<script>
import findcarList from '@/components/findcar-list';
export default {
    // shared:表示页面 wxss 样式将影响到自定义组件
    options: {
        styleIsolation: 'shared'
    },
    components: {
        findcarList
    },
    data() {
        return {
            banner01: require('@/static/images/banner/banner01.jpg'),
            current: 0,
            swiperDotIndex: 0,
            data: [
                {
                    image: '/static/images/banner/banner01.jpg'
                },
                {
                    image: '/static/images/banner/banner02.jpg'
                },
                {
                    image: '/static/images/banner/banner03.jpg'
                }
            ],
            dotsStyles: {
                width: 4,
                bottom: 5,
                color: '#fff',
                backgroundColor: 'rgba(255, 255, 255, .56)',
                selectedBackgroundColor: '#FFAE00',
                right: 10
            },
            tabs: ['全部', '选车', '用车'],
            activeIndex: 0, // 标签页当前选择项的下标
            offsetTop: 0, //粘性定位布局下与顶部的最小距离
            locked: false
        }
    },
    created() {
        // #ifdef H5
        this.offsetTop = 43;
        this.offsetTop = 0;
        // #endif
    },
    onLoad() {
    },
    methods: {
        handLocation() { },
        clickBannerItem(item) {
            console.info(item)
        },
        changeSwiper(e) {
            this.current = e.detail.current
        },
        goToDetail(index) {
            // 跳转到详情页的代码
            // 可以使用uni.navigateTo或uni.redirectTo等API实现页面跳转
        },
        // 内容滑动中触发
        slideChange() {
            this.locked = true
        },
        // 内容页滑动结束时触发
        slideEnd() {
            this.locked = false
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff url('~@/static/images/homebg.png');
    min-height: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    padding: 32rpx 32rpx;
}

.scroll-wrap {
    /* #ifndef H5 */
    height: calc(100vh - 44px);
    /* #endif */
    /* #ifdef H5 */
    height: calc(100vh - 88px);
    /* #endif */
}

.list-tabs {
    background: #fff;
    border-radius: 8rpx;
}
</style>
